<script setup>
import { ref, computed, reactive, onMounted } from "vue";
import { zhuxiaoapi } from "../../api/request.js";
import { onLoad, onShow } from "@dcloudio/uni-app";
const props = defineProps({});
let platform = uni.getStorageSync("platform");
const zhuxiao = async () => {
  let res = await zhuxiaoapi();
  uni.showToast({
    title: res.msg,
    icon: "none",
  });
  if (res.code == 1) {
    uni.removeStorageSync("USER_TOKEN_INFOS");
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    }, 500);
  }
};
const goback = () => {
  uni.navigateBack();
};
</script>

<template>
  <view class="wrap">
    <view
      class="header-wrap uni-row"
      :style="{
        paddingTop: platform.dingbu + 'rpx',
        height: platform.dingbu + 96 + 'rpx',
      }"
    >
      <image
        class="left"
        src="/static/img/goback-black.png"
        @click="goback"
        mode="widthFix"
      />
      <view class="title"> 注销账号 </view>
      <image
        style="opacity: 0"
        class="left"
        src="/static/img/goback-black.png"
        @click="goback"
        mode="widthFix"
      />
    </view>
    <scroll-view
      class="xilie"
      :scroll-y="true"
      :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }"
    >
      <image src="/static/img/gantanhao.png" class="gantanhao"></image>
      <view class="label">
        注销账号将永久失效且不可恢复，并将放弃以下权益资产与服务
      </view>
      <view class="box">
        <view class="labels"> 1、账号将无法登录； </view>
        <view class="labels"> 2、单词训练等功能无法查看和使用； </view>
      </view>
      <view class="btns" @click="zhuxiao"> 确认注销 </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="less">
.wrap {
  background: url("/static/img/wolrd/bg.png");
  background-size: 100% 100%;

  .header-wrap {
    justify-content: space-between;
    padding-left: 24rpx;
    padding-right: 24rpx;

    .left {
      width: 48rpx;
    }

    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
    }
  }

  .xilie {
    padding: 28rpx;
    padding-top: 92rpx;
    text-align: center;
    box-sizing: border-box;

    .gantanhao {
      width: 160rpx;
      height: 160rpx;
    }

    .label {
      margin-top: 44rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      line-height: 44rpx;
    }

    .box {
      padding: 40rpx;
      height: 224rpx;
      margin-top: 80rpx;
      // background: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
      border-radius: 16rpx;
      text-align: left;

      .labels {
        font-size: 28rpx;
        color: #666666;
        line-height: 48rpx;
      }
    }

    .btns {
      height: 84rpx;
      background: #9561f3;
      border-radius: 42rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #ffffff;
      margin-top: 300rpx;
      line-height: 84rpx;
    }
  }
}
</style>
